<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.wrapper {
				width: 500px;
				border: 1px solid #999;
				margin: 100px auto;
				padding-left: 20px;
			}
			
			#list {
				margin: 0;
				padding: 0;
				overflow: auto;
				list-style: none;
				height: 500px;
			}
			
			li {
				height: 80px;
				list-style: none;
				line-height: 80px;
				border-bottom: 1px solid #999;
			}
		</style>
	</head>

	<body>
		<div class="wrapper">
			<h3 class="title">加载更多示例</h3>
			<hr />
			<ul id="list"  onscroll="show();">
				<li>1 已大多数的努力程度,还轮不到拼天赋...</li>
				<li>2 已大多数的努力程度,还轮不到拼天赋...</li>
				<li>3 已大多数的努力程度,还轮不到拼天赋...</li>
				<li>4 已大多数的努力程度,还轮不到拼天赋...</li>
				<li>5 已大多数的努力程度,还轮不到拼天赋...</li>
				<li>6 已大多数的努力程度,还轮不到拼天赋...</li>
				<li>7 已大多数的努力程度,还轮不到拼天赋...</li>
				<li>8 已大多数的努力程度,还轮不到拼天赋...</li>
				<li>9 已大多数的努力程度,还轮不到拼天赋...</li>
				<li>10 已大多数的努力程度,还轮不到拼天赋...</li>
				<li>11 已大多数的努力程度,还轮不到拼天赋...</li>
				<li>12 已大多数的努力程度,还轮不到拼天赋...</li>
				<li>13 已大多数的努力程度,还轮不到拼天赋...</li>
				<li>14 已大多数的努力程度,还轮不到拼天赋...</li>
				<li>15 已大多数的努力程度,还轮不到拼天赋...</li>
				<li>16 已大多数的努力程度,还轮不到拼天赋...</li>
				<li>17 已大多数的努力程度,还轮不到拼天赋...</li>
				<li>18 已大多数的努力程度,还轮不到拼天赋...</li>
				<li>19 已大多数的努力程度,还轮不到拼天赋...</li>
				<li>20 已大多数的努力程度,还轮不到拼天赋...</li>
				<li>21 已大多数的努力程度,还轮不到拼天赋...</li>
				<li>22 已大多数的努力程度,还轮不到拼天赋...</li>
			</ul>
			<p id="more" style="display:none;cursor: pointer;" onclick="loadMore();">点击加载更多......</p>
		</div>
		<script type="text/javascript">
			var list = document.getElementById('list');
			
			var clientHeight = list.clientHeight;
			var scrollTop = list.scrollTop;
			var scrollHeight = list.scrollHeight;
			var aa=23;
			function show(){
				
				var text='';
				
				if(list.scrollHeight === list.scrollTop + list.clientHeight){
					more.style.display = 'block';
					for(var i=0;i<22;i++){
						text +=`<li>${aa++}已大多数的努力程度,还轮不到拼天赋...</li>`;
					}
					list.innerHTML+=text;
				}else{
					more.style.display = 'none';
				}
				
			}
			
		</script>
	</body>

</html>
